<template>
  <div class="page">
    <div class="search" style="text-align: left;white-space:nowrap">
      <span>cascader</span>
      <el-cascader v-model="_cascader" :options="cascaderData" @change="queryDatas"></el-cascader>
      <span>select</span>
      <el-select v-model="nx" @change="getNXname(nx), queryDatas()">
        <el-option v-for="item in nxOption" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <span>input:</span>
      <el-input v-model="serialno"></el-input>
      <span>Date:</span>
      <el-date-picker v-model="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
      <el-button :loading="loading" type="warning" style="margin-left:10px" @click="queryDatas()">搜索</el-button>
    </div>
    <div class="card" v-loading="loading">
      <el-scrollbar class="height">
        <el-row v-for="(item, index) in mainData" :key="index">
          <el-col :span="9" style="height:100%;border-right:5px solid #eee">
            <div style="height:500px">
              <LabelBox>
                <span slot="left">{{item.name}}</span>
              </LabelBox>
              <div style="height:calc(100% - 50px);">
                <ChartBlock :ref="'ScatterChart' + index"></ChartBlock>
              </div>
            </div>
          </el-col>
          <el-col :span="9" style="height:100%;border-right:5px solid #eee">
            <div style="height:500px">
              <LabelBox>
                <span slot="left">Algorithm 01.August 2020(Top 20)</span>
              </LabelBox>
              <div style="height:calc(100% - 50px);">
                <ChartBlock :ref="'sumChart' + index"></ChartBlock>
              </div>
            </div>
          </el-col>
          <el-col :span="6" style="height:100%;padding-left:10px">
            <div style="height:500px">
              <LabelBox>
                <span slot="left">Process Waring 01.Aug.2020</span>
              </LabelBox>
              <div style="height:calc(100% - 50px);">
                <ChartBlock :ref="'ProcessWaring' + index"></ChartBlock>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import charts from "@/components/charts.js";
export default {
  name: "Algorithm",
  data() {
    return {
      loading: false,
      nxOption: [],
      typeno: "",
      lineno: "",
      stationno: "",
      serialno: "",
      nx: "",
      nx_description: "",
      cascaderData: [],
      date: this.getTime(),
      mainData: [],
    };
  },
  computed: {
    _cascader: {
      get() {
        return [this.typeno, this.lineno, this.stationno];
      },
      set(val) {
        if (val.length) {
          this.typeno = val[0];
          this.lineno = val[1];
          this.stationno = val[2];
        }
      },
    },
  },
  mounted() {
    if (JSON.stringify(this.$route.query) != "{}") {
      this.typeno = this.$route.query.cascaderArray[0];
      this.lineno = this.$route.query.cascaderArray[1];
      this.stationno = this.$route.query.cascaderArray[2];
      this.date = this.$route.query.date;
      this.nx = this.$route.query.nx.toUpperCase();
    }
    if (JSON.parse(localStorage.getItem("cascaderData"))) {
      this.cascaderData = JSON.parse(localStorage.getItem("cascaderData"));
      this.formter();
    } else {
      // this.$http
      //   .request({
      //     url: "",
      //     method: "GET",
      //     showLoading: true,
      //   })
      //   .then((resp) => {
      //     if (resp.status == 100) {
      //       this.cascaderData = resp.data;
      //       localStorage.setItem("cascaderData", JSON.stringify(this.cascaderData));
      //       this.formter();
      //     }
      //   });
    }
    this.queryNX();
  },
  methods: {
    queryDatas() {
      this.loading = true;
      this.$http
        .request({
          url: "api/Foreigner/selectScatterPlot",
          method: "GET",
          params: {
            // name: this.typeno,
            // lineno: this.lineno,
            // stationno: this.stationno,
            // serialno: this.serialno,
            // beginTime: this.date || "",
            // endTime: this.date || "",
            // nx: this.nx,
            name: 'AdientHA3000P002',
            lineno: '2',
            stationno: '1',
            serialno: '',
            beginTime:'2020-06-04',
            endTime: '2020-06-04',
            nx: 'AccMin',
          },
        })
        .then((resp) => {
          this.loading = false;
          this.mainData = resp.data;
          this.$nextTick(() => {
            this.renderData(this.mainData);
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    renderData(data) {
      let Scatter = charts.ScatterChart;
      let bar = charts.ProcessWaring2;
      for (let i in data) {
        let min = 99999;
        let max = 0;
        //散点图
        let seriesData = [];
        data[i].data.forEach((item) => {
          if (item.y > max) max = item.y;
          if (item.y < min) min = item.y;
          seriesData.push([item.x, item.y, item.colour]);
        });
        Scatter.series[0].data = seriesData;
        Scatter.series[0].markArea.data[0][0].yAxis = data[i].downLine;
        Scatter.series[0].markArea.data[0][0].yAxis = data[i].upLine;
        this.$refs["ScatterChart" + i][0].setOption(Scatter);
        //统计
        let addNum = (max - min) / 50;
        let xArray = [];
        let sArray = [];
        let sArray_line = [];
        for (let i = 0; i <= 50; i++) {
          xArray.push(i * addNum + min);
          sArray.push(0);
          sArray_line.push(0);
        }
        sArray.splice(1, 1);
        sArray_line.splice(1, 1);
        data[i].data.forEach((data) => {
          if (data.y === max) {
            sArray[sArray.length - 1]++;
            sArray_line[sArray_line.length - 1]++;
          } else {
            sArray[parseInt((data.y - min) / addNum)]++;
            sArray_line[parseInt((data.y - min) / addNum)]++;
          }
        });
        let maxNum = 0;
        sArray.forEach((element) => {
          if (element > maxNum) maxNum = element;
        });

        this.$refs["sumChart" + i][0].setOption({
          grid: {
            left: "0%",
            right: "0%",
            bottom: "0%",
            top: "5%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            axisLabel: {
              formatter: function(params) {
                return Math.floor(params * 10000) / 10000;
              },
            },
            data: xArray,
          },
          yAxis: [
            {
              type: "value",
              max: Math.floor(maxNum * 120) / 100
            },
            {
              show: false,
              type: "value",
              max: maxNum,
              name: "",
            },
          ],
          series: [
            {
              data: sArray,
              type: "bar",
              itemStyle: {
                normal: {
                  color: function(params) {
                    if (params.name > data[i].downLine && params.name < data[i].upLine) {
                      return "green";
                    }
                    return "red";
                  },
                },
              },
              markLine:{
                data:[{
                  xAxis:parseInt((data[i].upLine - min) / addNum),
                }],
                symbol:'none',
                label:{
                  show:false,
                },
                lineStyle:{
                  type: 'solid',
                  width:2,
                  color:'red'
                }
              }
            },
            {
              data: sArray_line,
              smooth: true,
              symbolSize: 0,
              type: "line",
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  areaStyle: {
                    color: "#66c5bf",
                  },
                },
              },
              lineStyle: {
                //线的颜色
                color: "#0f968e",
              },
            },
          ],
        });
        //横向黄色百分比
        bar.series[0].data = [Math.floor(data[i].fail * 10000) / 100];
        this.$refs["ProcessWaring" + i][0].setOption(bar);
      }
      // bar.
      // fail
    },
    queryNX() {
      this.$http
        .request({
          url: "api/Foreigner/selectAll",
          method: "GET",
        })
        .then((resp) => {
          this.nxOption = resp.data || [];
          if (!this.nx && this.nxOption.length) {
            this.nx = this.nxOption[0];
          }
          this.getNXname(this.nx);
          this.queryDatas();
        });
    },
    getNXname(nx) {
      this.nxOption.forEach((element) => {
        if (element.number == nx) {
          this.nx_description = element.description;
          return;
        }
      });
    },
    formter() {
      let Datas = [];
      this.cascaderData.forEach((product) => {
        if (!this.typeno) this.typeno = product.product;
        let p = {
          value: product.product,
          label: product.product,
          children: [],
        };
        product.lines.forEach((line) => {
          if (!this.lineno) this.lineno = line.lineNo;
          let l = {
            value: line.lineNo,
            label: line.lineNo,
            children: [],
          };
          line.stations.forEach((station) => {
            if (!this.stationno) this.stationno = station.station;
            l.children.push({ value: station.station, label: station.station });
          });
          p.children.push(l);
        });
        Datas.push(p);
      });
      this.cascaderData = Datas;
      if (this.$route.params && typeof this.$route.params.typeno != "undefined") {
        this.typeno = this.$route.params.typeno;
        this.lineno = this.$route.params.lineno;
        this.stationno = this.$route.params.stationno;
      }
    },
    getTime(type) {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      if (type == "date") {
        return y + "-" + m;
      }
      if (type == "day") {
        return d;
      }
      return y + "-" + m + "-" + d;
    },
  },
};
</script>
<style lang="scss"></style>
